<template>
  <div>
    <div class="ipt">
      <el-input
        placeholder="请输入内容"
        v-model="name"
        class="input-with-select"
      >
        <el-button @click="subMit" slot="append"> 增加</el-button>
      </el-input>
    </div>
    <el-table :data="tableData" border style="width: 60%">
     <el-table-column
      type="index"
      width="50">
    </el-table-column>

      <el-table-column prop="name" label="类别名" width="350">
        <template slot-scope="scope">
          <el-table-column v-if="false" prop="name" label="类别名" width="350">
          </el-table-column>

         <div v-if="scope.row.id===hasId" class="ipt">
            <el-input
              placeholder="请输入内容"
              v-model="name"
              class="input-with-select"
              @change="onEnd"
            >
              <el-button   @click="onEnd" slot="append"> 确定</el-button>
            </el-input>
          </div>   
                

       <div v-else >
        {{ scope.row.name}}--{{scope.row.id}}
       </div>
          <!--  -->
        
        </template>
      </el-table-column>

      <el-table-column fixed="right" label="操作" width="150">
        <template slot-scope="scope">
          <el-button @click="handleClick(scope.row)" type="text" size="small"
            >修改</el-button
          >
          <el-button @click="onDelete(scope.row)" type="text" size="small"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  layout: "main",
  data() {
    return {
      tableData: [],
      name: "",
      hasId:""
    };
  },
  computed: {
    ...mapState("classify", ["classList"]),
  },
  async mounted() {
    this.addList();
  },
  methods: {
    handleClick(res) {

      this.hasId=res.id
      console.log(res.id);   
    },
    onEnd(){
      console.log(2222);
    },
    async addList() {
      await this.$store.dispatch("classify/getList");
      this.tableData = this.classList;
    },
    async subMit() {
      await this.$store.dispatch("classify/addList", this.name);
      this.name = "";
      this.addList();
    },
    async onDelete(data) {
      await this.$store.dispatch("classify/deleteClissIfy", data.id);
      this.addList();
    },
  },
  async({ params }) {},
};
</script>

<style scoped>
.ipt {
  width: 250px;
  display: inline-block;
}
</style>